<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { LockOutlined, UserOutlined } from "@ant-design/icons-vue";
import { validateMobile, validatePWD } from "@/utils/validate.js";

const visible = ref(false)
const innerWidth = ref(0)
const formRef = ref();
const formData = ref({
  avatar: '',
  username: '',
  mobile: '',
  desc: '',
  tdName: '',
  loginpass: '',
});
const rules = {
  mobile: [{ validator: validateMobile, trigger: 'blur' }],
  loginpass: [{ validator: validatePWD, trigger: 'blur' }],
};
const open = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}
const confirm = () => {
  formRef.value.validate().then(() => {
  }).catch((err) => {
  })
}
// 获取页面宽度
const getInnerWidth = () => {
  innerWidth.value = window.innerWidth
}
onMounted(() => {
  innerWidth.value = window.innerWidth
  window.addEventListener('resize', getInnerWidth)
})
onUnmounted(() => {
  window.removeEventListener('resize', getInnerWidth)
})
defineExpose({
  open,
  close
})
</script>

<template>
  <a-modal
      v-model:open="visible"
      title="商户入驻"
      :width="innerWidth>750?'500px':'100%'"
      :footer="null"
      wrap-class-name="full-width"
      style="max-width: 100%;z-index: 9999"
      :style="{top: innerWidth>750?'':'0', paddingBottom: innerWidth>750?'':'0'}"
  >
    <div class="edit-info">
      <a-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          labelAlign="right"
      >
        <a-form-item name="avatar" label="头像">
          <a-input v-model:value="formData.avatar" autocomplete="off" placeholder="请输入账号">
            <template #prefix> <UserOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="username" label="用户昵称">
          <a-input v-model:value="formData.username" autocomplete="off" placeholder="请输入账号">
            <template #prefix> <UserOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="mobile" label="手机号">
          <a-input v-model:value="formData.mobile" autocomplete="off" placeholder="请输入手机号">
            <template #prefix> <UserOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="desc" label="描述信息">
          <a-input v-model:value="formData.desc" autocomplete="off" placeholder="请输入描述信息">
            <template #prefix> <UserOutlined /> </template>
          </a-input>
        </a-form-item>
        <a-form-item name="desc" label="公司昵称">
          <a-input v-model:value="formData.desc" autocomplete="off" placeholder="请输入公司昵称">
            <template #prefix> <UserOutlined /> </template>
          </a-input>
        </a-form-item>
      </a-form>
      <div class="btn-box">
        <a-button type="primary" style="background: var(--primary);" @click="confirm"> 提交 </a-button>
      </div>
    </div>
  </a-modal>
</template>

<style scoped lang="scss">
.edit-info {
  :deep(.ant-form-item-label) {
    width: 80px;
  }
  .ant-input-affix-wrapper {
    border-radius: 0;
  }
  .btn-box {
    display: flex;
    justify-content: center;
    .ant-btn {
      width: 250px;
    }
  }
}
@media (max-width: 750px) {
  .edit-info {
    height: calc(100vh - 75px);
  }
}
</style>